<template>
  <el-collapse
    v-model="activeNames"
    @change="handleChange"
    style="margin: 15px"
  >
    <el-collapse-item
      :key="`c_${cindex}_${category.label}`"
      v-for="(category, cindex) in categories"
      :name="category.label"
    >
      <template slot="title">
        <span style="font-weight: bold"> {{ category.label }}</span>
      </template>
      <el-row :gutter="3">
        <el-col
          @dblclick.native="handleItemDblClick($event, category, item)"
          :span="8"
          :key="`c_${cindex}_${category.label}_i_${iindex}_${item.label}`"
          v-for="(item, iindex) in category.items"
        >
          <el-image
            fit="contain"
            style="width: 40px; height: 40px"
            :src="item.image"
            @dragstart.native="handleDragStart($event, category, item)"
          >
          </el-image>
          <div style="font-size: 12px">{{ item.label }}</div>
        </el-col>
      </el-row>
    </el-collapse-item>
  </el-collapse>
</template>
<script>


const categories = [
  {
    label: '交互组件',
    items: [{
      label: '流动条',
      image: require('@/assets/widget/base/liudong.svg'),
      initial: {
        xType: 'x-flow-line',
        xClass:'BrokenLine',
        x: 50,
        y: 50,
        trans: false,
        //points: [0, 0, 200, 0, 400, 0],
        bottomColor: '#6D7B92',
        flowColor: '#f1a94b',
        points: [0, 0, 400, 0],
        strokeWidth: 20,
      },
    }, {
      label: '线段',
      image: require('@/assets/widget/base/line.svg'),
      initial: {
        xType: 'x-solid-line',
        xClass:'BrokenLine',
        x: 50,
        y: 50,
        trans: false,
        //points: [0, 0, 200, 0, 400, 0],
        color: '#000000',
        points: [0, 0, 400, 0],
        strokeWidth: 5,
      },
    }, {
      label: '水池',
      image: require('@/assets/widget/base/shuichi.svg'),
      initial: {},
    }, {
      label: '旋转1',
      image: require('@/assets/widget/base/xuanzhuan.svg'),
      initial: {},
    }, {
      label: '旋转2',
      image: require('@/assets/widget/base/xuanzhuan.svg'),
      initial: {},
    }, {
      label: '旋转3',
      image: require('@/assets/widget/base/xuanzhuan.svg'),
      initial: {},
    }, {
      label: '变量1',
      image: require('@/assets/widget/base/bianliang.svg'),
      initial: {
        xType: 'x-label',
        x: 30,
        y: 30,
        text: '标签1',
        fontSize: 30,
        fontFamily: 'Calibri',
        bgColor: '#000000',
        fontColor: '#ffffff',
        project: '项目选择',
        deviceCategory: '设备分类选择',
        device: '设备选择',
        dataPoint: '数据点选择'
      },
    }, {
      label: '文本',
      image: require('@/assets/widget/base/text.svg'),
      initial: {
        xType: 'v-text',
        x: 30,
        y: 30,
        scaleX: 1,
        scaleY: 1,
        rotation: 0,
        text: '文本',
        fontSize: 30,
        fontFamily: 'Calibri',
        fill: 'green',
        skewX:0,
        skewY:0
      },
    }, {
      label: '变量2',
      image: require('@/assets/widget/base/bianliang.svg'),
      initial: {},
    }, {
      label: '写值',
      image: require('@/assets/widget/base/xiezhi.svg'),
      initial: {},
    }, {
      label: '状态文本',
      image: require('@/assets/widget/base/ztwb.svg'),
      initial: {},
    }, {
      label: '状态灯',
      image: require('@/assets/widget/base/deng.svg'),
      initial: {},
    }, {
      label: '按钮',
      image: require('@/assets/widget/base/mtbutton.svg'),
      initial: {},
    }, {
      label: '开关',
      image: require('@/assets/widget/base/kg.svg'),
      initial: {},
    }, {
      label: '网页',
      image: require('@/assets/widget/base/wangye.svg'),
      initial: {},
    }, {
      label: '监控',
      image: require('@/assets/widget/base/jiankong.svg'),
      initial: {},
    }, {
      label: '高级监控',
      image: require('@/assets/widget/base/gjsxt.svg'),
      initial: {},
    }, {
      label: '图片切换',
      image: require('@/assets/widget/base/tupianqiehuan.svg'),
      initial: {},
    }, {
      label: '画面跳转',
      image: require('@/assets/widget/base/jump.svg'),
      initial:  {
        xType: 'x-jump-button',
        x: 30,
        y: 30,
        text: '跳转按钮',
        fontSize: 30,
        fontFamily: 'Calibri',
        bgColor: '#000000',
        fontColor: '#ffffff',
        jumpTarget:null,
      },
    }]
  }, {
    label: '基本元素',
    items: [{
      label: '方形',
      image: require('@/assets/widget/elem/square.png'),
      initial: {
        xType: 'v-rect',
        x: 20,
        y: 20,
        width: 100,
        height: 50,
        fill: 'blue',
        stroke: 'black',
        strokeWidth: 1
      },
    }, {
      label: '圆形',
      image: require('@/assets/widget/elem/circle.png'),
      initial: {
        xType: 'v-circle',
        x: 20,
        y: 20,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 1
      },
    }, {
      label: '椭圆',
      image: require('@/assets/widget/elem/oval.png'),
      initial: {
        xType: 'v-ellipse',
        x: 20,
        y: 20,
        radiusX: 100,
        radiusY: 50,
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 1
      },
    }, {
      label: '楔形',
      image: require('@/assets/widget/elem/wedge.png'),
      initial: {
        xType: 'v-wedge',
        x: 20,
        y: 20,
        radius: 70,
        angle: 60,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 1,
        rotation: 0
      },
    }, {
      label: '星型',
      image: require('@/assets/widget/elem/star.png'),
      initial: {
        xType: 'v-star',
        x: 20,
        y: 20,
        numPoints: 5,
        innerRadius: 40,
        outerRadius: 70,
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 1
      },
    }, {
      label: '环形',
      image: require('@/assets/widget/elem/ring.png'),
      initial: {
        xType: 'v-ring',
        x: 20,
        y: 20,
        innerRadius: 40,
        outerRadius: 70,
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 1
      },
    }, {
      label: '弧环',
      image: require('@/assets/widget/elem/arc.png'),
      initial: {
        xType: 'v-arc',
        x: 20,
        y: 20,
        innerRadius: 40,
        outerRadius: 70,
        angle: 60,
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 1
      },
    }, {
      label: '多边形',
      image: require('@/assets/widget/elem/polygon.png'),
      initial: {
        xType: 'v-regular-polygon',
        sides: 6,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 1
      },
    }, {
      label: '箭头',
      image: require('@/assets/widget/elem/arrow.png'),
      initial: {
        xType: 'v-arrow',
        x: 20,
        y: 20,
        points: [0, 0, 50, 50],
        pointerLength: 20,
        pointerWidth: 20,
        fill: 'black',
        stroke: 'black',
        strokeWidth: 1
      },
    }, {
      label: '表格',
      image: require('@/assets/widget/elem/table.png'),
      initial: {},
    }]
  }, {
    label: '图表',
    items: [{
      label: '仪表盘1',
      image: require('@/assets/widget/echarts/yibiao.svg'),
      initial: {},
    }, {
      label: '仪表盘2',
      image: require('@/assets/widget/echarts/yibiao.svg'),
      initial: {},
    }, {
      label: '温度计',
      image: require('@/assets/widget/echarts/wenduji.svg'),
      initial: {},
    }, {
      label: '折线图',
      image: require('@/assets/widget/echarts/zhexian.svg'),
      initial: {},
    }, {
      label: '水池',
      image: require('@/assets/widget/echarts/waterpool.png'),
      initial: {},
    }]
  }, {
    label: '天气-时间',
    items: [{
      label: '天气1',
      image: require('@/assets/widget/weather/weather.svg'),
      initial: {},
    }, {
      label: '天气2',
      image: require('@/assets/widget/weather/weather.svg'),
      initial: {},
    }, {
      label: '当前时间',
      image: require('@/assets/widget/weather/time.svg'),
      initial: {},
    }]
  }, {
    label: '空压元件库',
    items: [{
      label: '储气罐',
      image: require('@/assets/widget/air/储气罐.png'),
      initial: {
        xType: 'x-image',
        x: 0,
        y: 0,
        src: require('@/assets/widget/air/储气罐.png'),
        width: 158,
        height: 379
      },
    }, {
      label: '干燥机',
      image: require('@/assets/widget/air/干燥机.71.png'),
      initial: {
        xType: 'x-image',
        x: 0,
        y: 0,
        src: require('@/assets/widget/air/干燥机.71.png'),
        width: 158,
        height: 379
      },
    }, {
      label: '过滤器',
      image: require('@/assets/widget/air/过滤器.png'),
      initial: {
        xType: 'x-image',
        x: 0,
        y: 0,
        src: require('@/assets/widget/air/过滤器.png'),
        width: 158,
        height: 379
      },
    }, {
      label: '空压机',
      image: require('@/assets/widget/air/空压机.55.png'),
      initial: {
        xType: 'x-image',
        x: 0,
        y: 0,
        src: require('@/assets/widget/air/空压机.55.png'),
        width: 158,
        height: 379
      }
    }, {
      label: '冷干机',
      image: require('@/assets/widget/air/冷干机.png'),
      initial: {
        xType: 'x-image',
        x: 0,
        y: 0,
        src: require('@/assets/widget/air/冷干机.png'),
        width: 158,
        height: 379
      },
    }, {
      label: '流量计',
      image: require('@/assets/widget/air/流量计.51.png'),
      initial: {
        xType: 'x-image',
        x: 0,
        y: 0,
        src: require('@/assets/widget/air/流量计.51.png'),
        width: 158,
        height: 379
      },
    }, {
      label: '气水分离器',
      image: require('@/assets/widget/air/气水分离器.png'),
      initial: {
        xType: 'x-image',
        x: 0,
        y: 0,
        src: require('@/assets/widget/air/气水分离器.png'),
        width: 158,
        height: 379
      },
    }, {
      label: '球阀',
      image: require('@/assets/widget/air/球阀.png'),
      initial: {
        xType: 'x-image',
        x: 0,
        y: 0,
        src: require('@/assets/widget/air/球阀.png'),
        width: 158,
        height: 379
      },
    },
    ]
  }, {
    label: '电力元库件2',
    items: [{
      label: '元件1',
      image: require('@/assets/widget/electric2/1.png'),
      initial: {
        xType: 'x-circle-arrow',
        x: 50,
        y: 50,
        scaleX: 3,
        scaleY: 3,
        fill: 'green'
      },
    }, {
      label: '元件2',
      image: require('@/assets/widget/electric2/2.png'),
      initial: {
        xType: 'x-two-circles',
        x: 50,
        y: 50,
        scaleX: 1,
        scaleY: 1,
        fill: 'green'
      },
    }, {
      label: '元件3',
      image: require('@/assets/widget/electric2/3.png'),
      initial: {
        xType: 'x-rich-text',
        content: "<span style='color:red;font-size:50px;'>测试</span>",
        x: 50,
        y: 50,
      },
    }, {
      label: '元件4',
      image: require('@/assets/widget/electric2/4.png'),
      initial: {
        xType: 'x-sprite',
        x: 50,
        y: 50,
        src: require('@/assets/blob-sprite.png'),
        animation: 'idle',
        animations: {
          idle: [
            // x, y, width, height (4 frames)
            2,
            2,
            70,
            119,
            71,
            2,
            74,
            119,
            146,
            2,
            81,
            119,
            226,
            2,
            76,
            119,
          ],
          punch: [
            // x, y, width, height (4 frames)
            2,
            138,
            74,
            122,
            76,
            138,
            84,
            122,
            346,
            138,
            120,
            122,
          ],
        },
        frameRate: 7,
        frameIndex: 0,
      },
    }, {
      label: '元件5',
      image: require('@/assets/widget/electric2/5.png'),
      initial: {
        xType: 'x-gif',
        src: 'https://konvajs.org/assets/yoda.gif',
        width: 400,
        height: 200,
      },
    }, {
      label: '元件6',
      image: require('@/assets/widget/electric2/6.png'),
      initial: {

        xType: 'x-star-spinner',
        x: 20,
        y: 20,
        numPoints: 5,
        innerRadius: 40,
        outerRadius: 70,
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 1,
        rotation: 30

      },
    }, {
      label: '元件7',
      image: require('@/assets/widget/electric2/7.png'),
      initial: {
        xType: 'x-label',
        x: 30,
        y: 30,
        text: '测试label',
        fontSize: 30,
        fontFamily: 'Calibri',
        fill: 'green'
      },
    }, {
      label: '元件8',
      image: require('@/assets/widget/electric2/8.png'),
      initial: {

        xType: 'x-line',

        x: 50,
        y: 50,
        /*
         * line segments with a length of 29px with a gap
         * of 20px followed by a line segment of 0.001px (a dot)
         * followed by a gap of 20px
         */



      },
    }, {
      label: '元件9',
      image: require('@/assets/widget/electric2/9.png'),
      initial: {
        xType: 'x-flow-line',
        x: 50,
        y: 50,
        trans: false,
        //points: [0, 0, 200, 0, 400, 0],
        points: [0, 0, 400, 0],
        strokeWidth: 20,
      },
    }, {
      label: '元件10',
      image: require('@/assets/widget/electric2/10.png'),
      initial: {},
    }, {
      label: '元件11',
      image: require('@/assets/widget/electric2/11.png'),
      initial: {},
    }, {
      label: '元件12',
      image: require('@/assets/widget/electric2/12.png'),
      initial: {},
    }, {
      label: '元件13',
      image: require('@/assets/widget/electric2/13.png'),
      initial: {},
    }, {
      label: '元件14',
      image: require('@/assets/widget/electric2/14.png'),
      initial: {},
    }, {
      label: '元件15',
      image: require('@/assets/widget/electric2/15.png'),
      initial: {},
    }, {
      label: '元件16',
      image: require('@/assets/widget/electric2/16.png'),
      initial: {},
    }, {
      label: '元件17',
      image: require('@/assets/widget/electric2/17.png'),
      initial: {},
    }, {
      label: '元件18',
      image: require('@/assets/widget/electric2/18.png'),
      initial: {},
    }, {
      label: '图片',
      image: require('@/assets/widget/electric2/18.png'),
      initial: {
        xType: 'x-image',
        x: 50,
        y: 50,
        src: 'https://konvajs.org/assets/yoda.jpg',
        width: 106,
        height: 118
      },
    }]
  }, {
    label: '电力元库件2(测试)',
    items: [{
      label: '元件1',
      image: require('@/assets/widget/electric2/1.png'),
      initial: {
        xType: 'x-circle-arrow',
        x: 50,
        y: 50,
        scaleX: 3,
        scaleY: 3,
        fill: 'green'
      },
    }, {
      label: '元件2',
      image: require('@/assets/widget/electric2/2.png'),
      initial: {
        xType: 'x-two-circles',
        x: 50,
        y: 50,
        scaleX: 1,
        scaleY: 1,
        fill: 'green',
        skewX:0,
        skewY:0
      },
    }, {
      label: '元件3',
      image: require('@/assets/widget/electric2/3.png'),
      initial: {
        xType: 'x-rich-text',
        content: "<span style='color:red;font-size:50px;'>测试</span>",
        x: 50,
        y: 50,
      },
    }, {
      label: '元件4',
      image: require('@/assets/widget/electric2/4.png'),
      initial: {
        xType: 'x-sprite',
        x: 50,
        y: 50,
        src: require('@/assets/blob-sprite.png'),
        animation: 'idle',
        animations: {
          idle: [
            // x, y, width, height (4 frames)
            2,
            2,
            70,
            119,
            71,
            2,
            74,
            119,
            146,
            2,
            81,
            119,
            226,
            2,
            76,
            119,
          ],
          punch: [
            // x, y, width, height (4 frames)
            2,
            138,
            74,
            122,
            76,
            138,
            84,
            122,
            346,
            138,
            120,
            122,
          ],
        },
        frameRate: 7,
        frameIndex: 0,
      },
    }, {
      label: '元件5',
      image: require('@/assets/widget/electric2/5.png'),
      initial: {
        xType: 'x-gif',
        src: 'https://konvajs.org/assets/yoda.gif',
        width: 400,
        height: 200,
      },
    }, {
      label: '元件6',
      image: require('@/assets/widget/electric2/6.png'),
      initial: {

        xType: 'x-star-spinner',
        x: 20,
        y: 20,
        numPoints: 5,
        innerRadius: 40,
        outerRadius: 70,
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 1,
        rotation: 30

      },
    }, {
      label: '元件7',
      image: require('@/assets/widget/electric2/7.png'),
      initial: {
        xType: 'x-label',
        x: 30,
        y: 30,
        text: '测试label',
        fontSize: 30,
        fontFamily: 'Calibri',
        fill: 'green'
      },
    }, {
      label: '元件8',
      image: require('@/assets/widget/electric2/8.png'),
      initial: {

        xType: 'x-line',

        x: 50,
        y: 50,
        /*
         * line segments with a length of 29px with a gap
         * of 20px followed by a line segment of 0.001px (a dot)
         * followed by a gap of 20px
         */



      },
    }, {
      label: '元件9',
      image: require('@/assets/widget/electric2/9.png'),
      initial: {
        xType: 'x-flow-line',
        x: 50,
        y: 50,
        //points: [0, 0, 200, 0, 400, 0],
        points: [0, 0, 400, 0],
        strokeWidth: 20,
      },
    }, {
      label: '元件10',
      image: require('@/assets/widget/electric2/10.png'),
      initial: {},
    }, {
      label: '元件11',
      image: require('@/assets/widget/electric2/11.png'),
      initial: {},
    }, {
      label: '元件12',
      image: require('@/assets/widget/electric2/12.png'),
      initial: {},
    }, {
      label: '元件13',
      image: require('@/assets/widget/electric2/13.png'),
      initial: {},
    }, {
      label: '元件14',
      image: require('@/assets/widget/electric2/14.png'),
      initial: {},
    }, {
      label: '元件15',
      image: require('@/assets/widget/electric2/15.png'),
      initial: {},
    }, {
      label: 'svg1',
      image: require('@/assets/widget/test/200.svg'),
      initial: {
        xType: 'x-image',
        x: 50,
        y: 50,
        src: require('@/assets/widget/test/200.svg'),
      },
    }, {
      label: 'svg2',
      image: require('@/assets/widget/test/201.svg'),
      initial: {
        xType: 'x-image',
        x: 50,
        y: 50,
        src: require('@/assets/widget/test/201.svg'),
      },
    }, {
      label: 'svg动图无效(解决)',
      image: require('@/assets/widget/test/153.svg'),
      initial: {
        xType: 'x-svg-animation',
        x: 50,
        y: 50,
        src: require('@/assets/widget/test/153.svg'),
      },
    }, {
      label: '图片',
      image: require('@/assets/widget/electric2/18.png'),
      initial: {
        xType: 'x-image',
        x: 50,
        y: 50,
        src: 'https://konvajs.org/assets/yoda.jpg',
        width: 106,
        height: 118
      },
    }]
  }]
export default {
  name: 'Tools',
  data () {
    return {
      categories: categories,
      activeNames: [categories[0].label],
    }
  },
  methods: {
    // eslint-disable-next-line no-unused-vars
    handleDragStart (event, category, item) {
      this.$emit('itemdragstart', category, item)
    },
    handleChange (val) {
      console.log(val);
    },
    // eslint-disable-next-line no-unused-vars
    handleItemDblClick (event, category, item) {
      //console.log('点击某个元素');
      this.$emit('itemdblclick', category, item)
    }
  }
}
</script>
